<template>
  <view class="broadband">
    <up-icon
      class="back-icon"
      name="arrow-left"
      size="30rpx"
      @tap="handleBackIconClick"
    />
    <broadbandCard :listData="roomList" @on-click="handleClick"></broadbandCard>
    <view class="tail" v-if="roomList.length !== 0">
      {{ tailText }}
    </view>
    <none-data v-else />
  </view>
</template>

<script setup>
import broadbandCard from "@/package_property/pages/components/broadband-card/index.vue";
import {
  getBroadbandInfoListApi,
  getBroadbandlfUseApi,
} from "@/package_property/pages/api/broadband.js";
import { ref } from "vue";
import { customNav } from "@/utils/customNav";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
const pageData = ref({
  page: 1,
  pageSize: 15,
});
const roomList = ref([]);
const tailText = ref("");
async function handleClick(item) {
  console.log("item", item);
  const res = await getBroadbandlfUseApi({
    accountNumber: item.accountNumber,
  });
  const {  data } = res || {};
  if (!data) {
    if (item.status == "0") {
      customNav(`apply?room=${item.accountNumber}`);
    } else {
      customNav(`application-details?information=${JSON.stringify(item)}`);
    }
  } else {
    uni.showToast({ title: "该宽带已正在使用，无需申请，请在生活服务中点击“去缴费”-选择对应房间进行缴费", duration: 2000, icon: "none" });
  }
}
async function getBroadbandInfoList() {
  const res = await getBroadbandInfoListApi(pageData.value);

  const { code, data } = res || {};
  if (code == 200) {
    console.log("records", data.records);
    roomList.value = roomList.value.concat(data.records);
    if (roomList.value == data.total) {
      tailText.value = "下滑加载更多";
    } else {
      tailText.value = "没有更多内容";
    }
  }
}
function handleBackIconClick() {
  customNav(`index`);
}
onShow(() => {
  roomList.value = [];
  getBroadbandInfoList();
});
onReachBottom(() => {
  pageData.value.page++;
  getBroadbandInfoList();
});
</script>

<style lang="less" scoped>
@import "@/static/style/global.less";
.broadband {
  :deep(.u-icon) {
    position: fixed;
    top: 100rpx;
    left: 20rpx;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    z-index: 99999;
    .u-icon__icon {
      color: #ffffff !important;
    }
  }
}
</style>